<!--
 * @Description:
 * @Author: linjz
 * @Date: 2021-06-25 10:25:00
 * @LastEditors: linjz
 * @LastEditTime: 2021-06-28 18:08:19
-->
<template>
  <!-- 订单管理页 -->
  <div>
    <!-- 头部标签页 -->
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="所有订单" name="所有订单" />
      <el-tab-pane label="待支付" name="待支付" />
      <el-tab-pane label="待派单" name="待派单" />
      <el-tab-pane label="待接单" name="待接单" />
      <el-tab-pane label="待服务" name="待服务" />
      <el-tab-pane label="待确认" name="待确认" />
      <el-tab-pane label="已完成" name="已完成" />
    </el-tabs>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" stripe>
      <el-table-column
        prop="id"
        label="订单编号"
        width="80"
        header-align="left"
        align="center"
      />
      <el-table-column
        prop="orderTime"
        label="下单时间"
        :formatter="fmtTableDateDay"
        align="center"
        header-align="center"
      />
      <el-table-column
        prop="total"
        label="总价"
        align="center"
        header-align="center"
      >
        <template #default="scope">
          <span>￥</span
          ><span style="color: #e65d6e; font-size: 18px">{{
            scope.row.total
          }}</span>
          <span>元</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        align="center"
        header-align="center"
      >
        <template #default="scope">
          <el-tag v-if="scope.row.status === '待接单'" type="warning"
            >待接单</el-tag
          >
          <el-tag v-else-if="scope.row.status === '待派单'" type="success"
            >待派单</el-tag
          >
          <el-tag
            v-else-if="
              scope.row.status === '待服务' || scope.row.status === '已完成'
            "
            type="info"
            >{{ scope.row.status }}</el-tag
          >
          <el-tag v-else-if="scope.row.status === '待支付'" type="danger"
            >待支付</el-tag
          >
          <el-tag v-else>待确定</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="customerId"
        label="顾客ID"
        align="center"
        header-align="center"
      />
      <el-table-column
        v-if="activeName !== '待支付' && activeName !== '待派单'"
        prop="employeeId"
        label="员工ID"
        align="center"
        header-align="center"
      >
        <template #default="scope">
          {{ scope.row.status === "待派单" ? "--" : scope.row.employeeId }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" header-align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            style="color: #606266"
            @click="detailRouter(scope.row.id)"
            >详情</el-button
          >
          <el-button
            v-show="scope.row.status === '待接单'"
            type="text"
            style="color: #e6a23c"
            @click="dispatch_Cancel(scope.row.id)"
            >取消派单</el-button
          >
          <el-button
            v-show="scope.row.status === '待派单'"
            type="text"
            @click="dispatch_Show(scope.row.id)"
            >派单</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      class="pagination_right"
      :current-page="params.page"
      :page-sizes="[2, 5, 10, 20]"
      :page-size="params.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 派单---模态框 -->
    <el-dialog title="派单" :visible.sync="dispatchVisible">
      <!-- {{ dispatchMan }}----{{ orderId }} -->
      <el-radio-group v-model="dispatchMan" size="medium">
        <el-radio
          v-for="item in employeeData"
          :key="item.id"
          class="radio-div"
          :label="item.id"
          border
          >{{ item.username + " "
          }}{{ item.realname === null ? "" : item.realname }}</el-radio
        >
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dispatchVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDispatch">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  pageQueryAllData,
  cascadeRoleFindAll,
  sendOrder,
  cancelSendOrder,
} from "@/api/order";
import { fmtTableDateDay } from "@/filters/index";
export default {
  data() {
    return {
      // 时间格式
      fmtTableDateDay,
      // 标签的双向绑定
      activeName: "所有订单",
      // 表格里的数据
      tableData: [],
      // 查询 参数
      params: {
        page: 1,
        pageSize: 10,
      },
      // 数据总量
      total: 0,
      // 员工数据
      employeeData: [],
      // 派单模态框显示
      dispatchVisible: false,
      // 派单给哪个员工
      dispatchMan: null,
      // 订单编号
      orderId: null,
    };
  },
  computed: {},
  created() {
    this.getData();
  },
  mounted() {},
  methods: {
    // 切换标签页
    handleTabClick() {
      this.params.page = 1;
      this.params.status = this.activeName;
      if (this.activeName === "所有订单") {
        this.params.status = null;
      }
      this.getData();
    },
    // 获取数据
    async getData() {
      const res = await pageQueryAllData({ ...this.params });
      if (res.status !== 200) return this.$message.error("获取数据失败");
      this.tableData = res.data.list;
      this.total = res.data.total;
    },
    // 改变页面数据数量大小
    handleSizeChange(newValue) {
      this.params.pageSize = newValue;
      this.getData();
    },
    // 改变当前页码
    handleCurrentChange(newValue) {
      this.params.page = newValue;
      this.getData();
    },
    // 查询所有员工信息
    async getEmployeeId() {
      const res = await cascadeRoleFindAll();
      console.log(res);
      if (res.status !== 200) return this.$message.error("员工数据获取失败");
      this.employeeData = res.data.filter((item) => {
        if (item.roles[0].id === 1) return item;
      });
    },
    // 点击 派单 弹出对话框
    dispatch_Show(id) {
      this.orderId = id;
      this.getEmployeeId();
      this.dispatchVisible = true;
    },
    // 确认派单 按钮触发事件
    async confirmDispatch() {
      const res = await sendOrder({
        waiterId: this.dispatchMan,
        orderId: this.orderId,
      });
      if (res.status !== 200) this.$$message.error("派单失败");
      this.$message.success("派单成功");
      this.dispatchVisible = false;
      this.getData();
    },
    // 取消派单
    async dispatch_Cancel(id) {
      const res = await cancelSendOrder({ orderId: id });
      if (res.status !== 200) return this.$message.error("取消失败");
      this.$message.success("取消成功");
      this.getData();
    },
    // 路由跳转 详情
    detailRouter(id) {
      this.$router.push({
        path: "/admin/order/Details",
        query: { index: id },
      });
    },
  },
};
</script>
<style scoped>
.pagination_right {
  float: right;
  margin-top: 8px;
}
.radio-div {
  margin: 10px;
  display: inline-block;
}
</style>
